<template>
  <view class="detail-container">
    <!-- 顶部返回和标题 -->
   
    <!-- 标题 -->
    <view class="detail-title">{{ detail.title }}</view>
    <!-- 资讯信息行 -->
    <view class="detail-info-row">
      <text class="info-author">{{ detail.author }}</text>
      <text class="info-date">{{ detail.date }}</text>
      <text class="info-read">600人已读</text>
      <text class="info-online">800人在线</text>
    </view>
    <!-- 简介 -->
    <view class="detail-desc">{{ detail.desc }}</view>
    <!-- 图片 -->
    <image v-if="detail.img" class="detail-img" :src="detail.img"></image>
    <!-- 正文内容 -->
    <view class="detail-content" v-html="detail.content"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {
        title: '',
        author: 'K老师',
        date: '2020-12-09',
        desc: '',
        img: '',
        content: ''
      }
    }
  },
  onLoad(options) {
    // 这里可根据options.title去请求后端或本地数据
    // 示例静态数据
    if (options.title === '罗非鱼斜管虫病防治指南') {
      this.detail = {
        title: '罗非鱼斜管虫病防治指南',
        author: 'K老师',
        date: '2020-12-09',
        desc: '罗非鱼养殖过程中，斜管虫病是低温季节不可忽视的病害。它会对罗非鱼的健康造成严重威胁，甚至导致大批死亡，给养殖户带来经济损失。以下是关于罗非鱼斜管虫病的详细防治内容。',
        img: '/static/news1.png',
        content: `
          <p>一、病原特征：认识斜管虫的“庐山真面目”<br/>
          斜管虫体背扁腹隆，腹面平坦，整体呈卵形。腹面长有纤毛，中部裸露，口管斜向左，与身体纵轴成倾斜角。虫体后部有一个大核和一个球形小核，这种独特的形态使其在水体中具有特定的游动方式。</p>
          <p>二、症状表现：从细微变化识别病害<br/>
          初期症状：鱼体体表充血，摄食明显减少，反应变得迟钝。出现呼吸困难的情况，常常聚集在水体边缘或水面，体表形成灰白色黏液，鳃部充血且相同的特征，病鱼在水中中游泳缓慢，更易被捕捞。</p>
        `
      }
    } else {
      // 其它资讯可按需补充
      this.detail = {
        title: options.title || '资讯详情',
        author: 'K老师',
        date: '2020-12-09',
        desc: '暂无详细描述',
        img: '',
        content: '<p>暂无内容</p>'
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.detail-container {
  background: #fff;
  min-height: 100vh;
  padding: 0 20rpx 40rpx 20rpx;
}
.detail-header {
  display: flex;
  align-items: center;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 10rpx;
}
.back-btn {
  font-size: 40rpx;
  color: $primary;
  margin-right: 20rpx;
  width: 60rpx;
  text-align: center;
  cursor: pointer;
}
.header-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin: 30rpx 0 10rpx 0;
}
.detail-info-row {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #888;
  margin-bottom: 16rpx;
  gap: 24rpx;
}
.detail-desc {
  font-size: 24rpx;
  color: #444;
  margin-bottom: 20rpx;
  line-height: 1.6;
}
.detail-img {
  width: 100%;
  max-width: 600rpx;
  border-radius: 12rpx;
  margin: 20rpx 0;
  display: block;
}
.detail-content {
  font-size: 24rpx;
  color: #333;
  line-height: 1.8;
  margin-top: 10rpx;
  word-break: break-all;
}
</style>